<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="dePForm">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="部门描述" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc" :rows="5"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建/更新</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {updataList,addList, getListInfo} from "../../../api/api";

  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    created() {
      // 如果id存在，在获取对应的详细信息，不存在，则方法不执行
      this.id = this.$route.query.id
      this.id && this.getInfo();
    },
    methods: {
      submitForm(formName) {
        //validate 是el-ui表单组件自带的一个方法  用来在JS阶段校验用户输入是否合法
        //  这个函数接收一个回调函数 合法会给回调函数传true 不合法传false
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 验证通过,把数据发送给后台
            // 如果this.$route.query.id存在，就执行updata方法，不存在，则执行方法add方法
            if(this.id) {
              updataList({
                name: this.ruleForm.name,
                desc: this.ruleForm.desc,
                departmentId: this.id
              }).then(data => {
                if (data.code === 0) {
                  // 修改成功
                  this.$alert('修改成功', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                      // 点击确定我们跳转到列表页
                      this.$router.push('/org/list')
                    }
                  })
                }  else {
                  this.$alert('修改失败', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  })
                }
              })
            } else {
              addList({
                name: this.ruleForm.name,
                desc: this.ruleForm.desc
              }).then(data => {
                if (data.code === 0) {
                  // 新增成功
                  this.$alert('新增成功', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                      // 点击确定我们跳转到列表页
                      this.$router.push('/org/list')
                    }
                  })
                } else {
                  this.$alert('新增失败', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  })
                }
              })
            }
          } else {
            this.$alert('新增失败', '提示', {
              confirmButtonText: '确定',
              callback: action => {}
            })
          }
        });
      },
      resetForm(formName) {
        //resetFields el-ui自带的 重置数据的方法
        this.$refs[formName].resetFields();
      },
      back() {
        this.$router.back();
      },
      getInfo() {
        // 根据id去后台获取详细信息
        let id = this.$route.query.id
        getListInfo(id).then(data => {
          this.ruleForm.name = data.data.name
          this.ruleForm.desc = data.data.desc
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .dePForm {
    text-align: left;
    width: 450px;
  }
  .el-textarea__inner {
    height: 200px;
  }
</style>